<!--
* jquery-form-builder-plugin - JQuery WYSIWYG Web Form Builder
* http://code.google.com/p/jquery-form-builder-plugin/
*
* Revision: @REVISION
* Version: @VERSION
* Copyright 2011 Lim Chee Kin (limcheekin@vobject.com)
*
* Licensed under Apache v2.0 http://www.apache.org/licenses/LICENSE-2.0.html
*
* Date:  
 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery Form Builder Plugin</title>
<script type="text/javascript" src="../lib/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../lib/js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="../lib/js/jquery.json-2.2.min.js"></script>
<script type="text/javascript" src="../lib/js/jquery.qtip.min.js"></script>
<!--DEV--><script type="text/javascript" src="js/jquery.formbuilder.core.js"></script>
<!--DEV--><script type="text/javascript" src="js/jquery.formbuilder.widget.js"></script>
<!--DEV--><script type="text/javascript" src="js/jquery.formbuilder.plaintext.js"></script>
<!--DEV--><script type="text/javascript" src="js/jquery.formbuilder.singlelinetext.js"></script>
<!--DEV--><script type="text/javascript" src="js/jquery.colorpicker.js"></script>
<!--DEV--><script type="text/javascript" src="js/jquery.fontpicker.js"></script>
<!--PROD.JS-->
<link type="text/css" href="../lib/css/smoothness/jquery-ui-1.8.7.custom.css" media="screen" rel="stylesheet" /> 
<link type="text/css" href="../lib/css/uni-form.css" media="screen" rel="stylesheet" />  
<link type="text/css" href="../lib/css/default.uni-form.css" media="screen" rel="stylesheet" />  
<link type="text/css" href="../lib/css/jquery.qtip.css" media="screen" rel="stylesheet" />
<!--DEV--><link type="text/css" href="css/jquery.formbuilder.core.css" media="screen" rel="stylesheet" />  
<!--DEV--><link type="text/css" href="css/jquery.formbuilder.plaintext.css" media="screen" rel="stylesheet" />
<!--DEV--><link type="text/css" href="css/jquery.colorpicker.css" media="screen" rel="stylesheet" />  
<!--DEV--><link type="text/css" href="css/jquery.fontpicker.css" media="screen" rel="stylesheet" /> 
<!--PROD.CSS-->
<script type="text/javascript">
$(function() {
 $('#container').formbuilder();
 //$('div.buttons').children().button();
 });
</script>
<style type="text/css">

		
</style>
</head>

<body>
<div id="container">
  <div id="header"><h1>JQuery Form Builder Plugin</h1></div>
  <div id="builderPalette">
     <div class="floatingPanelIdentifier"></div>
     <div class="floatingPanel">
			<div id="paletteTabs">
				<ul>
					<li><a href="#addField">Add Field</a></li>
					<li><a href="#fieldSettings">Field Settings</a></li>
					<li><a href="#formSettings">Form Settings</a></li>
				</ul>
				<div id="addField">
				  <strong>Standard Fields</strong>
					<div id="standardFields"></div>
					<br />
				  <strong>Fancy Fields</strong>
				  <div id="fancyFields"></div>
				</div>
				<div id="fieldSettings">
					<fieldset class="language">
					<legend></legend>
					</fieldset>
					<div class="general">
					</div>				
				</div>
				<div id="formSettings">
					<fieldset class="language">
					<legend>
					<label for="language">Language: </label>
					<select id="language">
					  <option value="en">English</option>
					  <option value="zh_CN">简体中文</option>
					</select>
					</legend>
					</fieldset>	
					<div class="general"></div>								
				</div>
			</div>     
     </div>
  </div>
  <form id="builderForm" action="#" class="uniForm">
  		<input type="hidden" id="name" name="name" />
			<input type="hidden" id="settings" name="settings" />
		  <div id="builderPanel">
		    <div class="formHeading"></div>
			  <fieldset>
<table>
<tr>
<td>
			  <div id="emptyBuilderPanel">Start adding some fields from the menu on the left.</div>
</td>
</tr>
</table>			  

		   <!-- 
		    <div class="ctrlHolder">
		      <label for="">Single Line Text</label>
		      <input type="text" id="" name="" value="" size="35" class="textInput">
		      <p class="formHint">This is a form hint.</p>
		    </div>
		  
		    <div class="ctrlHolder">
		      <label for="">Number</label>
		      <input type="text" id="" name="" value="" size="35" class="textInput">
		      <p class="formHint">This is a form hint.</p>
		    </div>
		  
		    <div class="ctrlHolder">
		      <label for="">Email Address</label>
		      <input type="text" id="" name="" value="" size="35" class="textInput">
		      <p class="formHint">This is a form hint.</p>
		    </div>
		  
		    <div class="ctrlHolder">
		      <label for="">Web Address</label>
		      <input type="text" id="" name="" value="" size="35" class="textInput">
		      <p class="formHint">This is a form hint.</p>
		    </div>
		  
		    <div class="ctrlHolder">
		      <label for="">Contact No.</label>
		      <input type="text" id="" name="" value="" size="35" class="textInput">
		      <p class="formHint">This is a form hint.</p>
		    </div>
		     -->
		  </fieldset>
		  
  </div>
  <div class="buttons">
		  <input type="submit" name="create" class="save" value="Create" id="create" />
	</div>
	</form>	  
  
</body>
</html>